<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>子元素过滤选择器</title>
  <script src="js/jquery-1.11.3.js"></script>
</head>

<body>
  <h3>子元素过滤选择器.</h3>
  <ul>
    <li>child1-basic0</li>
    <li>child2-basic1</li>
    <li>child3-basic2</li>
  </ul>
  <ul>
    <li>child1-basic3</li>
    <li>child2-basic4</li>
    <li>child3-basic5</li>
  </ul>
  <ul>
    <li>child1-basic6</li>
  </ul>
  <script>
    //查找每个ul中第一个li
    $("ul>li:first-child").css("color", "red");
    //  ↓自动翻译
    //.style.Color="red"
    //查找每个ul中最后一个li
    $("ul>li:last-child").css("border-bottom", "1px solid");
    //查找每个ul中处于偶数位置的 2n/even
    $("ul>li:nth-child(2n)").css("background-color", "lightGreen")
    //查找每个ul中第2个li
    $("ul>li:nth-child(2)").css("border-left", "2px solid");
    //查找作为ul下唯一子元素的li
    $("ul>li:only-child").css("background-color", "orange");
  </script>
</body>

</html>